"use client"

import { Button } from "@/components/ui/button"
import { ArrowRight, Target } from "lucide-react"

interface DashboardPageProps {
  onStartTraining: () => void
}

export function DashboardPage({ onStartTraining }: DashboardPageProps) {
  const projects = [
    {
      name: "反应训练",
      type: "基础训练",
      funded: "245ms",
      growth: "15%",
      partners: "今日",
      status: "active",
    },
    {
      name: "序列记忆",
      type: "认知训练",
      funded: "87%",
      growth: "23%",
      partners: "准确率",
      status: "active",
    },
    {
      name: "协调训练",
      type: "高级训练",
      funded: "156",
      growth: "8%",
      partners: "次数",
      status: "ready",
    },
    {
      name: "速度挑战",
      type: "竞技训练",
      funded: "TBA",
      growth: "NEW",
      partners: "即将推出",
      status: "coming",
    },
  ]

  const stats = [
    { label: "今日训练", value: "3", change: "+2", trend: "up" },
    { label: "平均反应", value: "245ms", change: "-15ms", trend: "up" },
    { label: "准确率", value: "87%", change: "+5%", trend: "up" },
    { label: "连续天数", value: "7", change: "+1", trend: "up" },
  ]

  return (
    <div className="min-h-screen bg-white p-8">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="border-b border-gray-200 pb-6 mb-12">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <div className="w-8 h-8 bg-orange-500 rounded"></div>
              <span className="text-sm font-medium">TRAINING CENTER</span>
            </div>
            <div className="flex items-center space-x-6 text-sm">
              <span>训练模式</span>
              <span>数据分析</span>
              <span>设置</span>
              <Button className="bg-orange-500 hover:bg-orange-600 text-white rounded-none h-8 px-4 text-sm">
                开始训练
              </Button>
            </div>
          </div>
        </div>

        {/* Main Content */}
        <div className="grid grid-cols-12 gap-8">
          {/* Left Sidebar */}
          <div className="col-span-3 border-r border-gray-200 pr-8">
            <div className="mb-8">
              <h3 className="text-sm font-medium text-gray-600 mb-4">今日统计</h3>
              <div className="space-y-4">
                {stats.map((stat, index) => (
                  <div key={index} className="border border-gray-200 p-4">
                    <div className="text-2xl font-bold text-black mb-1">{stat.value}</div>
                    <div className="text-sm text-gray-600 mb-2">{stat.label}</div>
                    <div className="text-xs text-orange-500">{stat.change}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="border border-gray-200 p-4">
              <div className="flex items-center justify-between mb-4">
                <span className="text-sm font-medium">准备开始训练？</span>
                <div className="w-3 h-3 bg-orange-500 rounded-full"></div>
              </div>
              <Button
                onClick={onStartTraining}
                className="w-full bg-orange-500 hover:bg-orange-600 text-white rounded-none h-10"
              >
                立即开始
              </Button>
            </div>
          </div>

          {/* Main Area */}
          <div className="col-span-9">
            <div className="mb-8">
              <h1 className="text-6xl font-bold text-black mb-4 tracking-tight">
                TRAINING_
                <br />
                MODES
              </h1>
            </div>

            {/* Featured Training */}
            <div className="border border-gray-200 p-8 mb-8">
              <div className="flex items-center justify-between mb-6">
                <div>
                  <div className="flex items-center space-x-3 mb-2">
                    <Target className="w-6 h-6 text-orange-500" />
                    <span className="text-sm font-medium text-orange-500">推荐训练</span>
                  </div>
                  <h2 className="text-2xl font-bold text-black">GT Protocol</h2>
                  <p className="text-gray-600 mt-2">
                    GT Protocol 是一个去中心化的
                    <br />
                    无信任平台，专为
                    <br />
                    简化和保护去中心化
                    <br />
                    资产管理而设计
                  </p>
                </div>
                <div className="text-right">
                  <div className="grid grid-cols-4 gap-8 mb-4">
                    <div>
                      <div className="text-2xl font-bold text-black">$4.1M</div>
                      <div className="text-sm text-gray-600">资金筹集</div>
                    </div>
                    <div>
                      <div className="text-2xl font-bold text-black">28x</div>
                      <div className="text-sm text-gray-600">ATH ROI</div>
                    </div>
                    <div>
                      <div className="text-2xl font-bold text-black">800%</div>
                      <div className="text-sm text-gray-600">社交增长</div>
                    </div>
                    <div>
                      <div className="text-2xl font-bold text-black">76+</div>
                      <div className="text-sm text-gray-600">合作伙伴</div>
                    </div>
                  </div>
                  <Button
                    onClick={onStartTraining}
                    className="bg-black hover:bg-gray-800 text-white rounded-none h-10 px-6"
                  >
                    开始训练 <ArrowRight className="w-4 h-4 ml-2" />
                  </Button>
                </div>
              </div>
            </div>

            {/* Training Grid */}
            <div className="grid grid-cols-3 gap-6">
              {projects.map((project, index) => (
                <div key={index} className="border border-gray-200 p-6">
                  <div className="flex items-center justify-between mb-4">
                    <span className="text-xs text-gray-500 uppercase tracking-wide">{project.type}</span>
                    <ArrowRight className="w-4 h-4 text-gray-400" />
                  </div>

                  <h3 className="text-xl font-bold text-black mb-4">{project.name}</h3>

                  <div className="space-y-3 mb-6">
                    <div className="flex justify-between">
                      <span className="text-sm text-gray-600">资金筹集</span>
                      <span className="text-sm font-medium">{project.funded}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-sm text-gray-600">社交增长</span>
                      <span className="text-sm font-medium">{project.growth}</span>
                    </div>
                  </div>

                  <div className="flex justify-between items-center">
                    <div>
                      <div className="text-2xl font-bold text-black">
                        {index === 0 ? "41x" : index === 1 ? "84" : index === 2 ? "9x" : "TBA"}
                      </div>
                      <div className="text-sm text-gray-600">
                        {index === 0 ? "ATH ROI" : index === 1 ? "合作伙伴" : index === 2 ? "ATH ROI" : "ATH ROI"}
                      </div>
                    </div>
                    <div>
                      <div className="text-2xl font-bold text-black">
                        {index === 0 ? "84" : index === 1 ? "92" : index === 2 ? "92" : "57"}
                      </div>
                      <div className="text-sm text-gray-600">合作伙伴</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Bottom Section */}
        <div className="border-t border-gray-200 pt-8 mt-12">
          <div className="flex items-center justify-between">
            <div>
              <span className="text-sm text-gray-600">► 准备开始讨论</span>
              <div className="text-lg font-bold text-black mt-1">您的训练计划？</div>
            </div>
            <div className="flex space-x-4">
              <Button className="bg-orange-500 hover:bg-orange-600 text-white rounded-none h-10 px-6">申请孵化</Button>
              <Button
                onClick={onStartTraining}
                className="bg-gray-100 hover:bg-gray-200 text-black rounded-none h-10 px-6"
              >
                申请资助
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
